import dayjs from "dayjs";
import { useState, useEffect } from "react";
import "./App.scss";
import PublicStyleComp from "./components/publicStyleComp";
import MyEcharts from "./components/myEcharts";
import { options1, options2, options3, options4 } from "./data/options";
const App = () => {
  const [date, setDate] = useState(dayjs().format(`YYYY/MM/DD HH:mm:ss`));

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(dayjs().format(`YYYY/MM/DD HH:mm:ss`));
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <div className="header">
        <h2>大数据可视化系统数据分析通用模版</h2>
        <span className="date">{date}</span>
      </div>

      <div className="main">
        <div className="left">
          <PublicStyleComp></PublicStyleComp>
          <PublicStyleComp>
            <MyEcharts height="300px" option={options1}></MyEcharts>
          </PublicStyleComp>
        </div>
        <div className="middle">
          <div className="top">
            <div className="top-left"></div>
            <div className="top-right">
              <div className="item">
                <MyEcharts height="100px" option={options2}></MyEcharts>
              </div>
              <div className="item">
                <MyEcharts height="100px" option={options2}></MyEcharts>
              </div>
              <div className="item">
                <MyEcharts height="100px" option={options2}></MyEcharts>
              </div>
            </div>
          </div>
          <PublicStyleComp>
            <MyEcharts height="500px" option={options3}></MyEcharts>
          </PublicStyleComp>
        </div>
        <div className="right">
          <PublicStyleComp></PublicStyleComp>
          <PublicStyleComp></PublicStyleComp>
          <PublicStyleComp></PublicStyleComp>
        </div>
      </div>
    </div>
  );
};

export default App;
